<template>
    <div>
    <div class="container">
        <div class="banner"></div>
        <div class="title">
            <div class="logo">
                <img src="../../common/img/logo.png">
            </div>
            <span class="src">
                <img src="../../common/img/src_white.png">
            </span>
            <span class="search">
                <img src="../../common/img/search_white.png">
            </span>
            <p>多点超市(北京物美西三旗店)</p>
            <div class="allbox">
                <span class="all">
                    <img src="../../common/img/all.png">
                </span>
                <ul class="allright">
                    <li @click="flag=!flag">全部分类</li>
                    <li v-for="(thelist,index) in rightlist" @click="choosetheright(index)" class="allright_div">{{thelist.catName}}</li>
                </ul>
            </div>
        </div>
        <div class="speak">
            <img src = "../../common/img/speaker.png">
            <p>满79元减6元</p>
        </div>
        <div class="content">
            <ul class="content_ul">
                <li v-for="(item,index) in lists" class="content_li">
                    <img v-lazy = "item.img"></img>
                    <p>{{ item.title }}</p>
                    <span class="price">￥{{item.price/100 | haha}}</span>
                    <span class="add" @click="addList(item)">
                        <img src="../../common/img/add.png">
                    </span>
                </li>
            </ul>
        </div>
        <div class="zhezhao" v-show="flag==false">
            <div class="allgoods">
                <div class="goodstitle">
                    <span class="gtitle1"><img src='../../common/img/all.png'></span>
                    <span class="gtitle2">全部分类</span>
                    <span class="gtitle3"  >取消</span>
                </div>
                <ul class="goodslist">
                    <li class='listleft'>
                        <ul>
                            <li v-for="(item1,index) in alllist" :key="index" :class="{'listl':leftindex==index}" @click="choose(index)">{{ item1.catName }}</li>
                        </ul>
                    </li>
                    <li class='listcenter'>
                        <ul>
                            <li v-for="(item2,index) in centerlist" :key="index" :class="{'listc':centerindex==index}" @click="choosecenter(index)">{{ item2.catName }}</li>
                        </ul> 
                    </li>
                    <li class='listright'>
                        <ul>
                            <li v-for="(item3,index) in rightlist" :key="index" @click="chooseright(index)" :class="{'listr':rightindex==index}">{{ item3.catName }}</li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    </div>
</template>
<script>

export default {
    data () {
        return {
            lists:[],
            flag:true,
            isL:false,
            isC:false,
            alllist:'',
            leftlist:'',
            centerlist:'',
            rightlist:'',
            leftindex:1,
            centerindex:'',
            rightindex:''
        }
    },
    methods: {
        //获取数据的
        getData:function(){
            var $this = this;
            this.$http.jsonp('https://gatewx.dmall.com/search/result?param=%7B%22keyword%22%3A%22国产水果%22%2C%22pairs%22%3A%221-10437%22%2C%22pageNum%22%3A%221%22%2C%22index%22%3A1%2C%22pageSize%22%3A20%7D&token=180DD99790479F6661A7631E63E851E6CCC1220E816FFA5BF9AAE4FEB0983621C91C4E4CDC646F0E4842C6B3BA2EC14BDD5E506DE86092704FFAAA8C5AEEA91DF37A33160A0D9ED37FB12AE98FDA9C3C755C9B6E9D2FD0DBAD0C148B0352D9E55EAD28AC247E0CC4E8B4716430A27F1AB433E93B693163937CB69F046970D15F&source=2&tempid=C7983DF1925000028B468A009BB0185A&pubParam=%7B%7D&_=1499776612193').then(function(res){
                $this.lists = res.data.data.list;
            })
        },
        getFenlei:function(){
            var $this = this;
            this.$http.get('../../../static/data/fenlei.json').then(function(res){
                $this.alllist = res.data.data.categoryInfo.categorys;
                $this.centerlist = this.alllist[1].childCmCategories;
                $this.rightlist = this.alllist[1].childCmCategories[0].childCmCategories;
            })
        },
        choose:function(index){
            this.centerlist = this.alllist[index].childCmCategories;
            this.leftindex=index
        },
        choosecenter:function(index){
            this.rightlist = this.centerlist[index].childCmCategories;
            this.isC=!this.isC;
            this.centerindex=index;
        },
        chooseright:function(index){
            this.flag=!this.flag;
            this.rightindex=index;
            var shuju = this.rightlist[index].catName;
            this.$http.jsonp('https://gatewx.dmall.com/search/result?param=%7B%22keyword%22%3A%22'+shuju+'%22%2C%22pairs%22%3A%221-10437%22%2C%22pageNum%22%3A%221%22%2C%22index%22%3A1%2C%22pageSize%22%3A20%7D&token=180DD99790479F6661A7631E63E851E6CCC1220E816FFA5BF9AAE4FEB0983621C91C4E4CDC646F0E4842C6B3BA2EC14BDD5E506DE86092704FFAAA8C5AEEA91DF37A33160A0D9ED37FB12AE98FDA9C3C755C9B6E9D2FD0DBAD0C148B0352D9E55EAD28AC247E0CC4E8B4716430A27F1AB433E93B693163937CB69F046970D15F&source=2&tempid=C7983DF1925000028B468A009BB0185A&pubParam=%7B%7D&_=1499776612193').then(function(res){
                this.lists = res.data.data.list;
            })
        },
        choosetheright:function(index){
            this.rightindex=index;
            var shuju = this.rightlist[index].catName;
            this.$http.jsonp('https://gatewx.dmall.com/search/result?param=%7B%22keyword%22%3A%22'+shuju+'%22%2C%22pairs%22%3A%221-10437%22%2C%22pageNum%22%3A%221%22%2C%22index%22%3A1%2C%22pageSize%22%3A20%7D&token=180DD99790479F6661A7631E63E851E6CCC1220E816FFA5BF9AAE4FEB0983621C91C4E4CDC646F0E4842C6B3BA2EC14BDD5E506DE86092704FFAAA8C5AEEA91DF37A33160A0D9ED37FB12AE98FDA9C3C755C9B6E9D2FD0DBAD0C148B0352D9E55EAD28AC247E0CC4E8B4716430A27F1AB433E93B693163937CB69F046970D15F&source=2&tempid=C7983DF1925000028B468A009BB0185A&pubParam=%7B%7D&_=1499776612193').then(function(res){
                this.lists = res.data.data.list;
            })
        },
        addList:function(item){
            this.$store.dispatch('addList',item);
            console.log(item);
        }
    }, 
    created () {
        this.getData();
        this.getFenlei();
        // this.addList();
    },
    filters:{
        haha:function(value){
            return value.toFixed(2);
        }
    }
}
</script>


<style scoped>
img{
  -webkit-transition: all 2s;
  -o-transition: all 2s;
  transition: all 2s;
}
img[lazy=loading] {
  opacity: 0;
}
img[lazy=error] {
  
}
img[lazy=loaded] {
  opacity: 1;
}
/**/
    .container{
        display:flex;
        flex-direction:column;
    }
/*banner*/
    .banner{
        height:1.8rem;
        background:url('../../common/img/banner.jpg') no-repeat center;
        background-size:100% 100%;
    }
/*banner上面的图片*/
    .title{
        width:100%;
        height:1.8rem;
        background:rgba(0,0,0,.5);
        position:absolute;
        top:0;
        overflow:hidden;
    }
    .title .logo{
        height:.8rem;
        width:.8rem;
        position:absolute;
        left:50%;
        top:50%;
        margin-left:-0.4rem;
        margin-top:-0.7rem;
    }
    .title span{
        display:inline-block;
        height:.3rem;
        width:.3rem;
        position:absolute;
    }
    .title .search{
        top:.1rem;
        right:.1rem;
    }
    .title .src{
        top:.1rem;
        right:.45rem;
    }
    .title p{
        color:white;
        font-size:.14rem;
        text-align:center;
        line-height:2.4rem;
    }
    .title span img{
        height:100%;
        width:100%;
    }
    .logo img{
        height:100%;
        width:100%;
    }
    .title .all{
        bottom:.03rem;
        left:.08rem;
    }

    .title .allbox{
        position:absolute;
        bottom:0;
        width: 100%;

    }
    .title .allright{
        height: 0.3rem;
        display:flex;
        /*flex-direction: row;*/
        flex-wrap: nowrap;
        
        color:#ffffff;
        margin-left:.45rem;
        overflow-x:scroll;
    }
    .title .allright>li{
        white-space: nowrap;
        width: 100%;
        font-size:.15rem;
        margin-right: .1rem; 
    }
    .title .allright_div:hover{
        color:#fd7c48;
        border-bottom:.05rem solid #fd7c48;
    }
/*喇叭*/
    .speak{
        height:.2rem;
        padding-left:.15rem;
        overflow:hidden;
        background-color:#fef2de;
    }
    .speak img{
        height:100%;
        float:left;
    }
    .speak p{
        float:left;
        line-height:.2rem;
        margin-left:.1rem;
    }
/*商品*/
    .content .content_ul{
        display:flex;
        flex-direction:row;
        flex-wrap:wrap;
    }
    .content .content_ul .content_li{
        position:relative;
        box-sizing:border-box;
        width:33.33333%;
        height:2rem;
        padding:.1rem;
        border: 1px solid #fafafa;
        border-top:none;
        border-left:none;
    }
    .content .content_ul .content_li img{
        width:100%;
    }
    .content .content_li p{
        text-align:center;
    }
    .price{
        position:absolute;
        bottom:4%;
        left:10%;
        color:#fd7c48;
    }
    .add{
        position:absolute;
        height:13%;
        width:22%;
        display:inline-block;
        bottom:4%;
        right:10%;
    }
    .add img{
        height:100%;
        width:100%;
    }
/*商品分类*/
    .zhezhao{
        position:fixed;
        z-index:10;
        top:0;
        left:0;
        background:rgba(0,0,0,.7);
        height:100%;
        width:100%;
    }
    .allgoods{
        background:white;
        margin-top:14%;
        height:93%;
        width:100%;
    }
    .goodstitle{
        height:.45rem;
        width:100%;
        position:relative;
        padding-left:.1rem;
        border-bottom:1px solid #dfdfdf;
    }
    .goodstitle span{
        font-size:.14rem;
        display:inline-block;
        height:.3rem;
        padding-top:.08rem;
    }
    .gtitle1 img{
        height:100%;
    }
    .gtitle2{
        position:absolute;
        top:.06rem;
        left:.4rem;
    }
    .gtitle3{
        position:absolute;
        top:.06rem;
        right:.2rem;
        color:#fd7c48;
    }
/*分类list*/
    .goodslist{
        height:100%;
        width:100%;
        display:flex;
        flex-direction:row;
    }
    .goodslist>li{
        width:33.33333%;

    }
    .goodslist li ul li{
        text-indent:.15rem;
        height:.44rem;
        font-size:.16rem;
        line-height:.44rem;
    }
    .goodlist li li:hover{
        color:#fd7c48;
        border-left:.05rem solid #fd7c48;
    }
    .listleft{
        background:white;
    }
    .listcenter{
        background:#f6f6f6;
    }
    .listright{
        background:#f0f0f0;
    }


    .listl{
        color:#fd7c48;
        border-left:.05rem solid #fd7c48;
    }
    .listc,.listr{
        color:#fd7c48;
    }


    /**
     *　　┏┓　　　┏┓+ +
     *　┏┛┻━━━┛┻┓ + +
     *　┃　　　　　　　┃ 　
     *　┃　　　━　　　┃ ++ + + +
     * ████━████ ┃+
     *　┃　　　　　　　┃ +
     *　┃　　　┻　　　┃
     *　┃　　　　　　　┃ + +
     *　┗━┓　　　┏━┛
     *　　　┃　　　┃　　　　　　　　　　　
     *　　　┃　　　┃ + + + +
     *　　　┃　　　┃
     *　　　┃　　　┃ +  神兽保佑
     *　　　┃　　　┃    代码无bug　　
     *　　　┃　　　┃　　+　　　　　　　　　
     *　　　┃　 　　┗━━━┓ + +
     *　　　┃ 　　　　　　　┣┓
     *　　　┃ 　　　　　　　┏┛
     *　　　┗┓┓┏━┳┓┏┛ + + + +
     *　　　　┃┫┫　┃┫┫
     *　　　　┗┻┛　┗┻┛+ + + +
     */
</style>
